<template>
  <view class="order-container">
    <view class="items">
      <view v-for="(item, i) in list" :key="i" class="item">
        <view class="item-head">
          <view class="item-sn">订单号: {{ item.orderSn }}</view>
          <view class="item-money">货款: {{ item.total_payment }}</view>
        </view>
        <view class="item-content">
          <view class="content">
            {{ !shows[i] ? filterContent(item.content) : item.content }}
          </view>
          <template v-if="item.content && item.content.length > 60">
            <view class="shows">
              <view v-if="shows[i]" class="showmore" @click="onHideMore(i)">
                <image src="../../static/assets/showmore.png" class="icon" mode=""></image>
              </view>
              <view v-else class="showmore hide" @click="onShowMore(i)">
                <image src="../../static/assets/showmore.png" class="icon" mode=""></image>
              </view>
            </view>
          </template>
          
        </view>
        <view class="item-time">订单时间: {{ item.createTime }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        shows: {},
      }
    },
    onLoad() {
      this.getList()
    },
    methods: {
      getList() {
        this.$http({
          url: '/order/getOrderList'
        }).then(res => {
          this.list = res.data.orderList
        })
      },
      onShowMore(i) {
        const shows = {...this.shows}
        shows[i] = true
        this.shows = Object.assign(shows)
      },
      onHideMore(i) {
        const shows = {...this.shows}
        shows[i] = false
        this.shows = Object.assign(shows)
      },
      filterContent(str) {
        return str.substr(0, 60) + '...'
      }
    }
  }
</script>

<style lang="less">
  .order-container{
    min-height: 100vh;
    background: #eee;
    .items{
      padding: 20rpx 0;
    }
    .item{
      border-radius: 10rpx;
      background: #fff;
      padding: 0 20rpx;
      margin-bottom: 20rpx;
      .item-head{
        display: flex;
        justify-content: space-between;
        font-size: 26rpx;
        margin-bottom: 10rpx;
        border-bottom: 1px solid #e8e8e8;
        padding: 16rpx 0;
      }
      .item-sn{
      }
      .item-money{
        
      }
      
      .item-content{
        font-size: 26rpx;
        padding: 20rpx 0;
        .content{
          width: 100%;
        }
        .shows{
          height: 50rpx;
        }
        .showmore{
          color: #096dd9;
          float: right;
          padding: 10rpx;
          &.hide{
            transform: rotate(180deg);
          }
          .icon{
            width: 50rpx;
            height: 50rpx;
          }
        }
      }
      .item-time{
        height: 80rpx;
        line-height: 80rpx;
        border-top: 1px solid #e8e8e8;
        font-size: 22rpx;
        text-align: right;
      }
    }
  }
</style>
